<template>
	<view class="content">
		<!-- 2.0.19支持autoBack，默认为false -->
		<u-navbar title="" @leftClick="leftClick">
		</u-navbar>
		<view style="margin-top: 45px;">
			<u-row>
				<u-col span="12">
					<view style="margin:auto;width:100%;">

						<view
							style="margin-top: 30px;position: absolute;z-index: 99;font-size: 1.8rem;color:#fff;font-weight:bold;">
							全新 EMONDA试骑会...
						</view>
						<image style="width: 100%;" src="../../static/p1.png"></image>
					</view>
				</u-col>
			</u-row>
		</view>

		<view style="background: #fff;padding: 30px 0px;">
			<u-row>
				<u-col span="4"
					style="border-right: 1px solid #333;height: 220px;text-align: right;padding-right: 10px;line-height: 28px;">
					<p style="font-weight: bold;">活动时间</p>
					<p style="font-weight: bold;">活动地点</p>
					<p style="font-weight: bold;">报名截止时间</p>
					<p style="font-weight: bold;">活动开始时间</p>
					<p style="font-weight: bold;">集合地点</p>
					<p style="font-weight: bold;">费用</p>
					<p style="font-weight: bold;">联系人</p>
					<p style="font-weight: bold;">人数上限</p>
				</u-col>
				<u-col span="8" style="text-align: left;height: 220px;padding-left: 10px;line-height: 28px;">
					<p>2024/01/03-2024/01/03</p>
					<p>ZWIFT EVENTS</p>
					<p>/</p>
					<p>2024/01/03 06:00</p>
					<p>PAINCAVE</p>
					<p>/</p>
					<p>Jiachao WANG. 1. SHINING</p>
					<p>1000</p>
				</u-col>
			</u-row>
			<view>
				<p style="padding-left: 20px;font-weight: bold;">300人已报名</p>
			</view>
		</view>
		<view style="margin-top: 20px;background: #fff;padding: 30px 0px;">
			<u-row>
				<u-col span="4" style="text-align: center;line-height: 28px;">
					<p>距离</p>
					<p>35</p>
					<p>km</p>
				</u-col>
				<u-col span="4" style="text-align: center;line-height: 28px;">
					<p>爬升</p>
					<p>1500</p>
					<p>m</p>
				</u-col>
				<u-col span="4" style="text-align: center;line-height: 28px;">
					<p>难度</p>
					<u-rate count="5" v-model="startV"></u-rate>
					<p>5</p>
				</u-col>
			</u-row>
		</view>
		<view style="background: #fff;padding: 30px 0px;text-align: center;margin-top: 20px;">
			<p style="font-weight: bold;">DAY1</p>
		</view>
		<view style="margin-top: 20px;background: #fff;padding: 30px 0px;">
			<u-row>
				<u-col span="3" style="text-align: center;line-height: 28px;">
					<view style="text-align: center;padding-left: 35%;">
						<u-icon name="map-fill" size="25"></u-icon>
					</view>
					<p>骑行距离</p>
					<p>10km</p>
				</u-col>
				<u-col span="3" style="text-align: center;line-height: 28px;">
					<view style="text-align: center;padding-left: 35%;">
						<u-icon name="clock-fill" size="25"></u-icon>
					</view>
					<p>骑行时长</p>
					<p>1小时</p>
				</u-col>
				<u-col span="3" style="text-align: center;line-height: 28px;">
					<view style="text-align: center;padding-left: 35%;">
						<u-icon name="photo-fill" size="25"></u-icon>
					</view>
					<p>地形</p>
					<p>平路</p>
				</u-col>
				<u-col span="3" style="text-align: center;line-height: 28px;">
					<view style="text-align: center;padding-left: 35%;">
						<u-icon name="car-fill" size="25"></u-icon>
					</view>
					<p>车型</p>
					<p>公路</p>
				</u-col>
			</u-row>
		</view>
		<view style="background: #fff;padding: 30px 0px;margin-top: 20px;">
			<p style="font-weight: bold;padding-left: 24rpx;">活动详情</p>
			<view class="u-content">
				<u-parse :content="content"></u-parse>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				startV: 3.5,
				content: `<p>露从今夜白，月是故乡明</p>
					<img src="/h5/static/images/20240113172854.png" />
				`
			}
		},
		onLoad() {

		},
		methods: {
			navigateBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			rightClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>


<style lang="scss">
	@import 'index.scss';
</style>